<template>
  <!--  单位注册信息审核页面-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-input v-model="form.platformName" clearable placeholder="请输入单位名称"></el-input>

      <el-select v-model="form.platformType" clearable placeholder="请选择单位类型">
        <el-option
          v-for="item in EnumUnitTypeList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-cascader :props="propsCascader" v-model="form.region" change-on-select clearable></el-cascader>

      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="common_btnBox">
      <i class="iconfont iconzongshu icon-size"></i>
      总数：{{form.total}}
    </div>
    <div class="page_main">

      <!-- table -->
      <el-table
        :data="tableList"
        border>
        <el-table-column
          label="序号"
          fixed
          width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="platformName"
          min-width="150"
          label="单位名称">
        </el-table-column>
        <el-table-column
          prop="platformTypeName"
          width="120"
          label="用户单位类型">
        </el-table-column>
        <el-table-column
          min-width="120"
          prop="regionName"
          label="行政区">
        </el-table-column>
        <el-table-column
          prop="phone"
          width="126"
          label="电话">
        </el-table-column>
        <el-table-column
          prop="loginName"
          min-width="80"
          label="登录用户名">
        </el-table-column>
        <el-table-column
          width="180"
          label="申请时间">
          <template slot-scope="scope">{{scope.row.createTime | formatTimer}}</template>
        </el-table-column>
        <el-table-column
          width="180"
          label="审核时间">
          <template slot-scope="scope">{{scope.row.checkTime | formatTimer}}</template>
        </el-table-column>
        <el-table-column
          width="120"
          prop="checkResultName"
          label="审核状态">
          <template slot-scope="scope">
            <!-- 0 未审核  1审核通过    2审核不通过 -->
            <span class="user_status" :class="`active_${scope.row.checkResult}`">{{scope.row.checkResultName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          min-width="100"
          prop="checkPerson"
          label="审核人">
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="160">
          <template slot-scope="scope">
            <button class="btn_edit" @click="showDialogDetails(scope.row)">查看详情</button>
            <button class="btn_edit" v-if="scope.row.checkResult === 0" @click="showDialog(scope.row)">审核</button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
        :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
        layout="sizes, prev, pager, next"
        :total="form.total">
      </el-pagination>
    </div>

    <!-- 审核状态弹窗 -->
    <el-dialog
      title="审核"
      :visible.sync="isShowDialog"
      width="500px">
      <!-- 具体form表单 -->
      <el-form label-position="right" ref="form" :rules="rules" :model="currentRow" label-width="90px"
               class="form_width-200">
        <el-form-item label="状态" prop="checkResult">
          <el-radio-group v-model="currentRow.checkResult">
            <el-radio v-for="item in EnumCheckTypeList.slice(1)" :key="item.code" :label="item.code">{{item.name}}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="驳回理由" prop="checkReason" v-if="currentRow.checkResult === 2">
          <el-input type="textarea" v-model.trim="currentRow.checkReason" placeholder="输入驳回理由"
                    :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="短信">
          <el-radio-group v-model="currentRow.sendMessage">
            <el-radio v-for="item in EnumSysBooleanList" :key="item.code" :label="item.code">{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="isShowDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateForm">确定</el-button>
      </span>
    </el-dialog>

    <!-- 弹窗-查看详情 -->
    <el-dialog
      title="查看详情"
      :visible.sync="isShowDialogDetails"
      width="30%">
      <!-- 单位信息 -->
      <el-card class="box_card">
        <div slot="header" class="box_card-header">
          <i class="iconfont iconassignments"></i>
          <em>单位信息</em>
        </div>
        <table>
          <tr v-for="(item, i) in unitInfoList" :key="i">
            <td class="title">{{item.title}}</td>
            <td class="content">{{item.value}}</td>
          </tr>
        </table>
      </el-card>
      <!-- 证明材料 -->
      <el-card class="box_card">
        <div slot="header" class="box_card-header">
          <i class="iconfont iconassignments"></i>
          <em>证明材料</em>
        </div>
        <ul class="img_wrap">
          <li v-for="(item, i) in imgList" @click="handlePictureCardPreview(item)" :key="i" class="flex-center">
            <img :src="item" alt="">
          </li>
        </ul>
      </el-card>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-defalut" @click="isShowDialogDetails = false">关闭</el-button>
      </span>

    </el-dialog>

    <el-dialog :visible.sync="dialogVisibleImg">
      <img class="big_img_limit" :src="dialogImageUrl" alt="">
    </el-dialog>

  </div>
</template>

<script>
  import {reviewCheck, reviewQueryList} from '@/services/model/authority-mgmt'
  import Format from '@/utils/format'
  import {areaList, cityList, provinceList} from '@/services/model/common'
  import constUrl from '@/services/env'
  import Enums from '@/utils/enums'

  export default {
    data() {
      return {
        form: {
          page: 1,
          pageSize: 10
        },
        tableList: [],
        currentRow: {}, // 新增数据
        // 审核状态下拉列表
        EnumCheckTypeList: [],
        // 单位类型下拉列表
        EnumUnitTypeList: [],
        // 是否发送短信
        EnumSysBooleanList: [],
        // 审核状态
        isShowDialog: false,
        // 查看详情弹窗
        isShowDialogDetails: false,
        rules: {
          checkResult: {required: true, message: '请选择状态', trigger: 'change'},
          checkReason: {required: true, message: '请输入驳回理由'}
        },
        propsCascader: {
          lazy: true,
          label: 'name',
          value: 'code',
          lazyLoad(node, resolve) {
            const {level, data} = node
            if (level === 0) {
              provinceList().then(res => {
                const {data} = res
                resolve(data)
              })
            } else if (level === 1) {
              cityList({provinceCode: data.code}).then(res => {
                const {data} = res
                resolve(data)
              })
            } else if (level === 2) {
              areaList({cityCode: data.code}).then(res => {
                const data = res.data.map(x => ({...x, leaf: true}))
                resolve(data)
              })
            } else {
              resolve([])
            }
          }
        },
        // 服务器域名
        constUrl,
        // 查看图片标志位
        dialogVisibleImg: false,
        // 查看的图片
        dialogImageUrl: ''
      }
    },
    mixins: [Enums],
    computed: {
      // 当前的图片列表
      imgList() {
        let list = this.currentRow.voucherList || []
        list = list.map(x => constUrl + x)
        return list
      },
      // 单位详细信息列表展示
      unitInfoList() {
        const params = this.currentRow
        let list = [
          {title: '单位名称', value: params.platformName},
          {title: '单位类型', value: params.platformTypeName},
          {title: '行政区', value: params.regionName},
          {title: '手机号', value: params.phone},
          {title: '登录用户名', value: params.loginName},
        ]
        if (params.platformType === 1) {
          list.push({title: '管辖范围', value: params.regionName})
        }
        return list

      },
    },
    filters: {
      // 时间格式化
      formatTimer(timer) {
        if (timer) {
          return Format(new Date(timer), 'yyyy-MM-dd hh:mm:ss')
        }
        return ''

      }
    },
    methods: {
      // 查看图片详情
      handlePictureCardPreview(url) {
        // 查看图片标志位
        this.dialogVisibleImg = true
        // 查看的图片
        this.dialogImageUrl = url
      },
      // 查看详情弹窗
      showDialogDetails(row) {
        this.currentRow = JSON.parse(JSON.stringify(row))
        this.isShowDialogDetails = true
      },
      // 表单提交
      validateForm() {
        this.$refs.form.validate((valid) => {
          valid && this.submitForm()
        })
      },
      // 表单数据提交
      async submitForm() {
        // 不是决绝审核时，讲该字段值为空
        if (this.currentRow.checkResult !== 2) {
          this.currentRow.checkReason = null
        }
        await reviewCheck(this.currentRow)
        this.isShowDialog = false
        this.$notify({
          type: 'success',
          title: '提示',
          message: '修改成功'
        })
        this.queryList()
      },
      // 打开审核弹窗
      showDialog(row) {
        this.currentRow = {checkResult: 1, id: row.id}
        this.isShowDialog = true
      },
      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1
        return param
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },


      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },
      // 新增数据
      handleAdd() {
        this.currentRow = {
          name: '',
          description: null
        }
        this.isShowDialog = true
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      },
      /**
       * row  当前操作行的对象
       */
      handleEdit(row) {
        this.currentRow = JSON.parse(JSON.stringify(row))
        this.isShowDialog = true
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      },
      async queryList() {
        const form = {...this.form, region: (this.form.region || []).join('-')}
        // 由于在前端进行过滤，所以name不能传到后端
        let res = await reviewQueryList(form)
        this.tableList = res.data?.records || []
        this.form.page = Number(res.data?.current)
        this.form.total = Number(res.data?.total)
        // console.log(this.tableList)
      }
    },
    mounted() {
      // 审核状态
      this.queryDictList(['EnumCheckType'], ['EnumCheckTypeList'])
      // 查询单位类型
      this.queryDict('EnumUnitType').then(res => {
        let list = []
        // 隐藏设备厂家选项
        res.map(x => {
          if (x.code != 3) {
            list.push(x)
          }
        })
        this.EnumUnitTypeList = list
      })

      // 是否发送短信
      this.queryDictList(['EnumSysBoolean'], ['EnumSysBooleanList'])
    },
    activated() {
      this.queryList()
    }
  }
</script>
<style lang="less" scoped>
  .user_status {
    &::before {
      content: '';
      margin-right: 6px;
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #969997;
    }

    &.active_0::before {
      background-color: #969997;
    }

    &.active_1::before {
      background-color: #0DC26B;
    }

    &.active_2::before {
      background-color: rgb(212, 35, 35);
    }
  }

  .box_card {
    margin-top: 10px;

    .box_card-header {
      display: flex;
      align-items: center;
      font-size: 16px;

      & > i {
        margin-right: 8px;
        color: #0DC26B;
        vertical-align: middle;
      }

      & > em {
        color: #303133;
        font-weight: 600;
      }
    }

    table {
      .title {
        font-weight: 600;
        color: #303133;
        width: 120px;
        text-align: right;
        line-height: 24px;

        &::after {
          content: '：';
        }
      }

      .content {
        padding-left: 16px;
        line-height: 24px;
      }
    }
  }

  .img_wrap {
    display: flex;
    flex-wrap: wrap;

    li {
      margin-right: 20px;
      cursor: pointer;

      img {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }

  .big_img_limit {
    width: 100%;
    max-width: 80% vw;
    max-height: 80vh;
  }
</style>
